<template>
  <view class="party">
    <view class="party-bc">
      <image :src="imgurl + inpayimg" mode="widthFix"></image>
    </view>
    <view class="party-view">
      <view class="party-view-top"> 请观看视频后再去答题</view>
      <video
        id="myVideo"
        :src="sectionInfo.type_config.video_url"
        @timeupdate="bindtimeupdate"
      ></video>

      <!-- <view class="bt-dk" @click="cjfun" v-if="reachFlag == 1">
        <image :src="imgurl + signImg"></image>
      </view> -->
      <view class="bt-dk" @click="cjfun" v-if="reachFlag == 1"> 去答题 </view>
    </view>

    <!-- 	<view class="popup" v-if="showpopup">
			<view class="popup-k">
				<image src="/static/images/Popup.png" mode="widthFix"></image>
				<view class="bt">
					进入商场
				</view>
			</view>
			
		</view> -->
    <u-popup
      v-model="showpopup"
      mode="center"
      border-radius="45"
      @close="failclose"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k fail-kan">
        <!-- <view class="fail-title">
		          	温馨提示
		          </view> -->
        <view class="fail-content"> 恭喜您，签到成功 </view>
        <view class="fail-bt" @click="goshop"> 进入商城 </view>
      </view>
    </u-popup>
    <u-popup
      v-model="failshow"
      mode="center"
      border-radius="45"
      @close="failclose"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k">
        <view class="fail-title"> 温馨提示 </view>
        <view class="fail-content"> {{ message }} </view>
        <view class="fail-bt" @click="gohome"> 去首页</view>
      </view>
    </u-popup>

    <u-popup
      v-model="noinshow"
      mode="center"
      border-radius="45"
      @close="failclose"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k">
        <view class="fail-title"> 对不起暂无活动资格 </view>
        <view class="fail-content"> {{ message }} </view>
        <view class="fail-bt" @click="gohome"> 去首页 </view>
      </view>
    </u-popup>
    <u-popup
      v-model="norsshow"
      mode="center"
      border-radius="35"
      @close="failclose"
      @open="failopen"
      :closeable="true"
      :overlay="true"
    >
      <view class="fail-k">
        <view class="fail-title"> 温馨提示 </view>
        <view class="fail-content"> {{ message }} </view>
        <view class="fail-bt" @click="gohome"> 去首页 </view>
      </view>
    </u-popup>

    <u-popup
      v-model="payshow"
      mode="center"
      border-radius="10"
      :mask-close-able="false"
      :closeable="false"
      :overlay="true"
    >
      <view class="fail-k payshow-k">
        <view class="fail-title jnshow-title"> 活动介绍 </view>
        <view class="fail-content jnshow-content" v-html="shuoming"> </view>
        <view class="payshow-bt">
          <button @click="btfunin">我已知晓以上活动内容</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getSessionKey,
  grantWxStep,
  getActivityDetails,
  beginActivity,
  signActivity,
} from '@/api/index/index'
import { BASE_URL_IMAHE } from '../../../utils/https'

const app = getApp()
export default {
  data() {
    return {
      imgurl: BASE_URL_IMAHE,
      historyTime: 0,
      form: {},
      showpopup: false,
      jumpShopLink: '',
      noinshow: false,
      failshow: false,
      norsshow: false,
      sectionInfo: {
        type_config: {
          video_url: '',
        },
      },
      inpayimg: '',
      reachFlag: 0,
      whiteListId: '',
      joinRecordId: '',
      token: '',
      signImg: '',
      shuoming: '',
      payshow: true,
      title: '',
      message: '',
      objshow: {},
    }
  },
  onLoad(options) {
    var sjs = this.randomWord()
    var datatime = Date.parse(new Date())
    var tokens = '' + sjs + '' + datatime
    this.token = tokens
    //   this.type=uni.getStorageSync("type")
    //   this.form.v=uni.getStorageSync("v")
    if (!options.activityId) {
      // 跳转回原页面
      if (getCurrentPages().length == 1) {
        uni.reLaunch({
          url: '/pages/index/index',
        })
      } else {
        uni.navigateBack({
          delta: 1,
        })
      }
    } else {
      this.form.activityId = options.activityId
      this.form.userRef = uni.getStorageSync('userRef')
      this.getlist()
    }
  },
  methods: {
    btfunin() {
      this.payshow = false
      if (this.objshow.result == -100) {
        this.message = this.objshow.message
        this.noinshow = true
      } else if (this.objshow.result == -101) {
        // -101 已参与活动
        this.message = this.objshow.message
        this.failshow = true
      } else if (this.objshow.result == -102) {
        // -101 已参与活动
        this.message = this.objshow.message
        this.norsshow = true
      } else {
        // uni.showToast({
        //   title: '数据错误',
        //   icon: 'none',
        // })
      }
    },
    failclose() {
      uni.navigateBack({
        delta: 1,
      })
    },
    goshop(url) {
      window.location.href = this.jumpShopLink
    },
    gohome() {
      uni.reLaunch({
        url: '/pages/home/index',
      })
    },
    async getlist() {
      this.inpayimg = null
      const resindex = await getActivityDetails(JSON.stringify(this.form))

      if (resindex.result == 0) {
        //   that.joinRecordId=resindex.activity.joinRecordId
        //   that.sportStep=resindex.activity.sportStep
        // that.whiteListId=resindex.activity.whiteListId
        // 				that.getdataobj(res.encryptedData,res.iv)
        this.joinRecordId = resindex.activity.joinRecordId
        this.whiteListId = resindex.activity.whiteListId
        this.inpayimg = resindex.activity.posterBackdropImg
        app.globalData.data.inpayimg = this.inpayimg
        this.signImg = resindex.activity.signImg
        this.shuoming = resindex.activity.rule
        this.title = resindex.activity.title
        this.sectionInfo.type_config.video_url =
          BASE_URL_IMAHE + resindex.activity.videoTutorial
      } else {
        this.objshow = resindex
      }
      uni.setNavigationBarTitle({
        title:
          resindex.activity && resindex.activity.title
            ? resindex.activity.title
            : '活动详情', // 新标题内容
      })

      // 		const res=await getHistoryPage(JSON.stringify(this.form))
      // 		console.log(res)
      // this.toall=Math.ceil(res.page.count/res.page.pageSize)
      // this.historylist.push(...res.page.list)
      // this.form.pageNo++
    },
    //获取
    async cjfun() {
      // this.showpopup=true
      // return
      // var data = {
      //   activityId: this.form.activityId,
      //   whiteListId: this.whiteListId,
      //   joinRecordId: this.joinRecordId,
      //   userRef: this.form.userRef,
      //   token: this.token,
      // }
      // var res = await signActivity(JSON.stringify(data))
      // if (res.result == 0) {
      //   this.showpopup = true
      //   this.jumpShopLink = res.jumpShopLink
      // } else {
      //   var sjs = this.randomWord()
      //   var datatime = Date.parse(new Date())
      //   var tokens = '' + sjs + '' + datatime
      //   this.token = tokens
      // }
      uni.navigateTo({
        url: `/pages/party/partystury?activityId=${this.form.activityId}`,
      })
      return
    },

    // 监听播放进度
    bindtimeupdate(e) {
      // return
      var currentTime = e.detail.currentTime //当前进度
      var duration = e.detail.duration //视频时长

      //视频播放完成后触发奖励保存接口
      let percent = 100 //播放进度百分比，可以改成 80 或者90等其它数字，到达时触发奖励保存
      // let percent = this.sectionInfo.type_config.video_complate_rate;
      let upper = duration * (percent / 100)
      if (currentTime >= upper) {
        this.reachFlag = 1
        if (this.isTo) {
          this.isTo = false //isTo 奖励加锁，进入页面只能触发一次

          console.log('触发奖励请求接口')
          // this.$request(this.$api.Weike.sectionComplete, this.options).then((res) => {});
        }
      }

      // 禁止拖动进度条快进
      if (currentTime - this.historyTime > 2) {
        uni.showToast({
          title: '不能快进哦',
          icon: 'none',
        })
        let videoContext = wx.createVideoContext('myVideo')
        videoContext.seek(this.historyTime)
      }
      this.historyTime = currentTime
    },
    randomWord() {
      var chars = [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z',
      ]
      var nums = ''
      for (var i = 0; i < 20; i++) {
        var id = parseInt(Math.random() * 61)
        nums += chars[id]
      }
      return nums
    },
  },
}
</script>
<style scoped lang="scss">
.party {
  width: 100%;
  height: 100vh;

  .party-bc {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .party-view {
    width: 100%;
    position: absolute;
    top: 208rpx;
    left: 0rpx;
    text-align: center;

    #myVideo {
      width: 710rpx;
      height: 465rpx;
    }

    .party-view-top {
      font-size: 36rpx;
      text-align: center;
      font-weight: bold;
      color: #8e110e;
      margin-bottom: 45rpx;
    }
  }
}

.bt-dk {
  width: 310rpx;
  height: 85rpx;
  background-color: #d49a7c;
  border-radius: 50rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 85rpx;
  margin: 485rpx auto 0rpx;
  position: relative;

  image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // z-index: -1;
  }

  text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    line-height: 85rpx;
  }
}

.popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .popup-k {
    image {
      width: 530rpx;
    }

    .bt {
      position: relative;
      width: 400rpx;
      height: 88rpx;
      background-color: #48db8d;
      color: #ffffff;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      line-height: 88rpx;
      margin: -95rpx auto 0;
      z-index: 1;
      border-radius: 50rpx;
    }
  }
}

// 弹框
.fail-k {
  width: 490rpx;
  height: 405rpx;
  box-sizing: border-box;
  // padding-top: 29rpx;
  text-align: center;
  background: url('/static/images/popup-icon.png') no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;

  .fail-title {
    padding-top: 120rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .fail-content {
    padding-top: 29rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .fail-bt {
    margin: 55rpx auto 0rpx;
    width: 188rpx;
    height: 64rpx;
    background-color: #730017;
    font-size: 18rpx;
    color: #ffffff;
    border-radius: 35rpx;
    line-height: 64rpx;
  }
}

.fail-kan {
  padding-top: 120rpx;
}

.jnshow-k {
  width: 650rpx;
  height: auto;
  padding-bottom: 40rpx;

  .jnshow-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .jnshow-content {
    margin-top: 29rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #718096;
    padding: 0 20rpx;
    white-space: pre-wrap;
    text-align: left;
  }
}

.po-k {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.payshow-k {
  width: 720rpx;
  height: auto;
  max-height: 90vh;
  // padding-bottom: 100rpx;
  position: relative;

  .jnshow-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #111827;
  }

  .jnshow-content {
    margin-top: 29rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: #718096;
    padding: 0 20rpx;
    white-space: pre-wrap;
    text-align: left;
    padding-bottom: 200rpx;
  }

  .payshow-bt {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 50rpx;
    font-size: 20rpx;

    button {
      background-color: #f1c16e;
      padding: 20rpx 40rpx;
      color: #ffffff;
    }
  }
}
</style>
